NaN

预科一阶段知识点和目标

(1) 开发工具和快捷键

详看开发工具一节

(2) 认识网页

  1. 一个html文件用浏览器打开就是一个网页
  2. 什么是标签(元素)
    1. html 根标签
    2. body标签 主体(身体) 主要用来放网页的内容
    3. head标签 主要用来对网页进行设置

(3) 常用标签和标签的属性

  1. h1~h6 标题标签
  2. div 区块标签(大)
  3. p 段落标签
  4. span 区块标签(小)
  5. ul(ol) 列表标签
  6. li 列表标签选项
  7. a 链接标签
  8. img 图片标签
  9. input输入框
  10. 标签的分类
    • 块级标签 (独自占据一行的标签)
    • 行内标签 (内容有多少就占据多大的空间,排在同一行,排不下时才换行)

1-2-3-4 标题标签, div, p, span 

// demo1.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>第一个网页</title>
    </head>
    <body>
        
        hello 网页

    </body>
</html>

// demo2.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 标题标签 -->
     <h1>h1111111111111111111111111</h1>   
     <h2>h1111111111111111111111111</h2>   
     <h3>h1111111111111111111111111</h3>   
     <h4>h1111111111111111111111111</h4>   
     <h5>h1111111111111111111111111</h5>   
     <h6>h1111111111111111111111111</h6>   

     <!-- 区块标签(用得最多的一个标签) -->
     <div>div1111111111</div>
     <div>div1111111111</div>
     <div>div1111111111</div>

     <!-- 段落标签 -->
     <p>pppppppppppppppp</p>
     <p>pppppppppppppppp</p>
     <p>pppppppppppppppp</p>
     <p>pppppppppppppppp</p>

     <!-- 区块标签(小) -->
     <span>span1</span>
     <span>span2</span>
     <span>span3</span> 

</body>
</html>

5-6-7-8 ul(ol), li, a, img 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表 -->
   <ul>
       <li>1111</li>
       <li>2222</li>
       <li>3333</li>
       <li>4444</li>
       <li>5555</li>
       <li>6666</li>
   </ul>    
   
      <!-- 有序列表 -->
      <ol>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
        <li>6666</li>
      </ol>   

      <!-- 链接标签 -->
      <a href="https://www.baidu.com/">百度</a>
      <a href="./demo1-网页.html">demo1</a>

      <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
      <img src="./aa.png" alt="">

</body>
</html>

9. input输入框

  • 文本输入框
  • 密码输入框
  • 单选框
  • 多选框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 文本输入框 -->
    <input type="text" placeholder="请输入手机号码"> <br/>

    <!-- 密码输入框 -->
    <input type="password" placeholder="请输入密码"> <br/>

    <!-- 单选框,添加name=xxx实现单选 -->
    男<input type="radio" name="aaa">
    女<input type="radio" name="aaa"> <br>

    <!-- 多选框 -->
    篮球<input type="checkbox">
    足球<input type="checkbox">
    羽毛球<input type="checkbox"> 

</body>
</html>

10. 标签的分类 

- 块级标签, 不管标签的内容有多少, 都要占一行
- 行内标签

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 块级标签 -->
    <div class="div"> div标签 </div>
    <!-- 块级标签 -->
    <p class="p"> p标签 </p>
    <!-- 行内标签 -->
    <a class="aa" href="">a标签</a>
    <span class="span">span标签</span> 
    <!-- 把行内标签放入块级标签实现换行 -->
    <p> <input type="text"> </p>
    <p> <input type="text"> </p>
</body> 
</html>
```

(4) 练习

使用所学标签完成百度注册页面